<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="姓名" prop="name">
                        <Input v-model="filters.name" placeholder="姓名" style="width: 250px"></Input>
                    </FormItem>
                    <FormItem label="身份证号" prop="idNumber">
                        <Input v-model="filters.idNumber" placeholder="身份证号" style="width: 250px"></Input>
                    </FormItem>
                    <FormItem label="房产" prop="room">
                        <Input v-model="filters.room" placeholder="房产" style="width: 250px"></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('form1')">
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Row>
            <Row class="form-row">
                <Button type="success" icon="md-add" @click="handleAdd()" style="margin:5px 5px">
                    新增
                </Button>
                <Tooltip>
                    <Button type="info" icon="ios-undo" @click="importBill()" style="margin:5px 5px">
                        导入
                    </Button>
                </Tooltip>
                <Button type="warning" icon="ios-share-alt" @click="exportExcel()"
                        style="margin:5px 5px">
                    导出
                </Button>
                <Button type="primary" icon="md-download" @click="download()"
                        style="margin:5px 5px">
                    下载模板
                </Button>
            </Row>

            <Table stripe border :loading="tableLoading" :columns="tableColumn" :data="tableData" ref="table">
            </Table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

        <Modal v-model="formVisible" title="新增" class="modal-content" width="900" :mask-closable="false">
            <Form :model="modal" :rules="rule" ref="form2" label-position="right" :label-width="110"
                  class="myOpenFrom">
                <Row>
                    <FormItem label="姓名" prop="name">
                        <Input v-model="modal.name" placeholder="姓名"/>
                    </FormItem>
                    <FormItem label="身份证号码" prop="idNumber">
                        <Input v-model="modal.idNumber" placeholder="身份证号码"/>
                    </FormItem>
                    <FormItem label="喜好" prop="like">
                        <Input v-model="modal.like" placeholder="喜好"/>
                    </FormItem>
                    <FormItem label="工作单位" prop="employer">
                        <Input v-model="modal.employer" placeholder="工作单位"/>
                    </FormItem>
                    <FormItem label="家庭成员" prop="family">
                        <Input v-model="modal.family" placeholder="家庭成员"/>
                    </FormItem>
                </Row>
            </Form>

            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>
        <Modal v-model="formTransfeVisible" title="业主过户" class="modal-content" width="900" :mask-closable="false">
            <Form :model="modal" :rules="rule" ref="form3" label-position="right" :label-width="100" class="myOpenFrom">
                <Row>
                    <FormItem label="新业主姓名" prop="name">
                        <Input v-model="modal.name" placeholder="姓名"/>
                    </FormItem>
                    <FormItem label="身份证号码" prop="idNumber">
                        <Input v-model="modal.idNumber" placeholder="身份证号码"/>
                    </FormItem>
                    <FormItem label="喜好" prop="like">
                        <Input v-model="modal.like" placeholder="喜好"/>
                    </FormItem>
                    <FormItem label="工作单位" prop="employer">
                        <Input v-model="modal.employer" placeholder="工作单位"/>
                    </FormItem>
                    <FormItem label="家庭成员" prop="family">
                        <Input v-model="modal.family" placeholder="家庭成员"/>
                    </FormItem>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="handlePrintSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>
    </div>
</template>


<script>
    import Treeselect from "@riophae/vue-treeselect";
    //校验规则
    const rules = {
        name: [{
            required: true,
            message: "请输入新业主姓名",
        }],
        idNumber: [{
            required: true,
            message: "请输入身份证号",
        }],
        room: [{
            required: true,
            message: "请输入房产",
        }],
        family: [{
            required: true,
            message: "请输入家庭成员",
        }],
    };
    //查询
    let handleQuery = function (name) {
        this.filters.pageNum = 1;
        this.$refs[name].validate(valid => {
        });
    };

    //打开新增页面
    let handleAdd = function(){
        this.$refs["form2"].resetFields();
        this.formVisible = true;
    }
    //新增保存按钮
    let handleSubmit = function () {
        this.$refs["form2"].validate(valid => {
            if (valid) {
                this.$Modal.success({
                    title: '保存成功'
                });
                this.formVisible = false
            }
        });
    };
    //业主过户
    let transfe = function (name) {
        this.$refs["form3"].resetFields();
        this.formTransfeVisible = true;
    };
    //客户入伙
    let join = function (name) {
        this.$Modal.success({
            title: '已确认入伙'
        });
    };
    //迁入
    let moveIn = function (name) {
        this.$Modal.success({
            title: '已确认迁入'
        });

    }
    //迁出
    let moveOut = function (name) {
        this.$Modal.success({
            title: '已确认迁出'
        });
    }
    //过户保存按钮
    let handlePrintSubmit = function () {
        this.$refs["form3"].validate(valid => {
            if (valid) {
                this.formTransfeVisible = false;
                this.$Modal.success({
                    title: '过户成功'
                });
            }
        });
    };
    //取消
    let onCancel = function () {
        this.$refs["form2"].resetFields();
        this.$refs["form3"].resetFields();
        this.formTransfeVisible = false;
        this.formLoading = false;
        this.formVisible = false;
    };

    export default {
        name: "houseList",
        components: {
            Treeselect
        },
        data() {
            return {
                name: "",
                deptList: [],
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //验证规则
                rule: rules,

                //表格数据
                tableData: [
                    {
                        name: '张三',
                        idNumber: '127873645172836475',
                        room: "曙光小区5栋33-4",
                        like: "篮球",
                        employer: "自由职业者",
                        family: "李四 王五"
                    },
                    {
                        name: '李四',
                        idNumber: '127873645172836475',
                        room: "别墅小区5栋1-1",
                        like: "足球",
                        employer: "渝北区建设银行",
                        family: "张三 王五"
                    },
                    {
                        name: '王五',
                        idNumber: '127873645172836475',
                        room: "阳光小区3栋33-3",
                        like: "k歌",
                        employer: "阿里巴巴",
                        family: "张三 李四"
                    },
                ],
                //表格字段
                tableColumn: [
                    {
                        title: "姓名",
                        key: "name"
                    },
                    {
                        title: "身份证号",
                        key: "idNumber"
                    },
                    {
                        title: "房产",
                        key: "room"
                    },
                    {
                        title: "喜好",
                        key: "like"
                    },
                    {
                        title: "工作单位",
                        key: "employer"
                    },
                    {
                        title: "客户家庭成员",
                        key: "family"
                    },
                    {
                        key: "action",
                        title: "操作",
                        align: "center",
                        width: 200,
                        render: (h, params) => {
                            return h("div",[
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        marginTop: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.join(params.name)
                                        }
                                    }
                                }, '客户入伙'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        marginTop: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.transfe(params.name)
                                        }
                                    }
                                }, '业主过户'),
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        marginTop: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.moveIn(params.name)
                                        }
                                    }
                                }, '客户迁入'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        marginTop: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.moveOut(params.name)
                                        }
                                    }
                                }, '客户迁出'),
                            ]);
                        }
                    }
                ],
                //数据表格隐藏那个状态
                tableLoading: false,
                //对话框隐藏状态
                formVisible: false,
                formTransfeVisible: false,
                //表单提交状态
                formLoading: false,
                modal: {},
                communityLocations: "",
                casdata: [],

            };
        },
        methods: {
            handleQuery,
            handleAdd,
            transfe,
            moveIn,
            moveOut,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            join,
            handleSubmit,
            handlePrintSubmit,
            onCancel,
        }
    };
</script>

<style lang="less">
</style>
